
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格实现固定列和表头</title>
    <style>
        /*table样式*/
        .table{width:100%;margin:auto;padding-top:0;font-size:12px;text-align:center;color:#666;}
        .table th{background-color:#f9f9f9;border:1px solid #e8e8e8;;height:40px;font-weight: bold;}
        .table td{border:1px solid #e8e8e8;border-top:0;height:40px;padding:0px 4px}
        .table tr:nth-child(2n){background-color:#f9f9f9}
        /*固定*/
        .container {position: relative;}
        .table1, .table2 {width: 800px;}
        .table1 {position: absolute;overflow: hidden;}
        .table1 td,th{background-color: white;}
        .table2 {overflow-x: scroll;}
    </style>
</head>
<body>
<div class='container'>
    <div class="table1">
        <table class="table" cellspacing="0" >
            <thead>
            <tr>
                <th rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">名称</th>
                <th rowspan="2" style="min-width: 80px; max-width: 80px;width: 80px;">总量（人次）</th>
                <th rowspan="2" style="min-width: 80px; max-width: 80px;width: 80px;">编码</th>
                <th rowspan="2" style="min-width: 80px; max-width: 80px;width: 80px;">编码总量（人次）</th>
                <th colspan="2" >时段流量（人次）</th>
            </tr>
            <tr style="visibility: hidden;">
                <th></th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td rowspan="2">0F主出入口</td>
                <td rowspan="2">1600</td>
                <td>C001_1_1B</td>
                <td>800</td>
            </tr>
            <tr>
                <td>C002_1_1B</td>
                <td>800</td>
            </tr>
            <tr>
                <td rowspan="2">1F主出入口</td>
                <td rowspan="2">200</td>
                <td>C002_1_1B</td>
                <td>100</td>
            </tr>
            <tr>
                <td>C003_1_1B</td>
                <td>100</td>
            </tr>
            <tr>
                <td rowspan="2">2F主入口</td>
                <td rowspan="2">600</td>
                <td>C003_1_1B</td>
                <td>100</td>
            </tr>
            <tr>
                <td>C004_1_1B</td>
                <td>500</td>
            </tr>
            <tr>
                <td rowspan="2">B1F直梯</td>
                <td rowspan="2">600</td>
                <td>C004_1_1B</td>
                <td>300</td>
            </tr>
            <tr>
                <td>C005_1_1B</td>
                <td>300</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="table2">
        <table class="table" cellspacing="0">
            <thead>
            <tr>
                <th rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">名称</th>
                <th rowspan="2" style="min-width: 80px; max-width: 80px;width: 80px;">总量（人次）</th>
                <th rowspan="2" style="min-width: 80px; max-width: 80px;width: 80px;">编码</th>
                <th rowspan="2" style="min-width: 80px; max-width: 80px;width: 80px;">编码总量（人次）</th>
                <th colspan="7" style="text-align:left; padding-left: 200px;">时段流量（人次）</th>
            </tr>
            <tr>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:00</th>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:05</th>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:10</th>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:15</th>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:20</th>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:25</th>
                <th style="min-width: 80px; max-width: 80px;width: 80px;">10:30</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td rowspan="2">0F主出入口</td>
                <td rowspan="2">1600</td>
                <td>C001_1_1B</td>
                <td>800</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>800</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>C002_1_1B</td>
                <td>800</td>
                <td>800</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td rowspan="2">1F主出入口</td>
                <td rowspan="2">200</td>
                <td>C002_1_1B</td>
                <td>100</td>
                <td>0</td>
                <td>100</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>C003_1_1B</td>
                <td>100</td>
                <td>0</td>
                <td>100</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td rowspan="2">2F主入口</td>
                <td rowspan="2">600</td>
                <td>C003_1_1B</td>
                <td>100</td>
                <td>0</td>
                <td>100</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>C004_1_1B</td>
                <td>500</td>
                <td>0</td>
                <td>0</td>
                <td>500</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td rowspan="2">B1F直梯</td>
                <td rowspan="2">600</td>
                <td>C004_1_1B</td>
                <td>300</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>300</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            <tr>
                <td>C005_1_1B</td>
                <td>300</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>300</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>